<template>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

    <!-- Simple header with scrollable tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span v-if="user.id != -1" class="mdl-layout-title">您好! {{ user.name }}.</span>
                <span v-else class="mdl-layout-title">卖夕夕</span>
            </div>
            <!-- Tabs -->
            <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
                <a href="#scroll-tab-1" class="mdl-layout__tab is-active">浏览商品</a>
                <a href="#scroll-tab-2" class="mdl-layout__tab" @click="this.$refs.orders.getOrder">我的订单</a>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">卖夕夕</span>
            <div v-if="this.user.id == -1">
                登录以查看个人信息
                <!-- Raised button -->
                <button class="mdl-button mdl-js-button mdl-button--raised" @click="goToLogin">
                    去登录
                </button>
            </div>
            <nav v-else class="mdl-navigation">
                <a v-if="user.group != 'merchant'" class="mdl-navigation__link" @click="toBeMerchant">成为商家账户</a>
                <a v-else class="mdl-navigation__link" @click="goToMerchant">前往商家页</a>
                <a class="mdl-navigation__link" @click="userExit">退出登录</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
                <div class="page-content">
                    <!-- 浏览商品 Your content goes here -->
                    <div class="commodity" id="div_commodity">
                        <WelcomeCommodityCard v-for="comm in commodity_list" :commodity=comm :id=comm.id :name=comm.name
                            :price=comm.price :buyOnclick="buyOnclick" />
                    </div>
                </div>
            </section>
            <section class="mdl-layout__tab-panel" id="scroll-tab-2">
                <div class="page-content">
                    <!-- 订单页 Your content goes here -->
                    <div v-if="this.user.id != -1" class="commodity">
                        <WelcomeOrder ref='orders' />
                    </div>
                    <div v-if="this.user.id == -1">
                        登录以查看订单信息
                        <!-- Raised button -->
                        <button class="mdl-button mdl-js-button mdl-button--raised" @click="goToLogin">
                            去登录
                        </button>
                    </div>
                </div>
            </section>
            <section class="mdl-layout__tab-panel" id="scroll-tab-3">
                <div class="page-content">
                    <!-- 购买页 Your content goes here -->
                    <div class="commodity">
                        <WelcomeBuy ref='buylist' :backToMainMenu="backToMainMenu" />
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 消息 -->
    <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
    </div>
</template>

<script>
// import 'https://code.getmdl.io/1.3.0/material.min.js'
// import 'animate.css';
import WelcomeCommodityCard from './WelcomeCommodityCard.vue';
import WelcomeBuy from './WelcomeBuy.vue';
import WelcomeOrder from './WelcomeOrder.vue';
import { ref, watch } from 'vue';
import { routerKey } from 'vue-router';
export default {
    components: {
        WelcomeCommodityCard,
        WelcomeBuy,
        WelcomeOrder,
    },
    setup() {
        return {

        }
    },
    data() {
        return {
            //User
            user: {
                id: -1,
                name: null,
                group: null
            },
            //Commodity
            commodity_list: []
        }
    },
    created() {
        this.getAllComm()
    },
    mounted() {
        this.getUser();
    },
    methods: {
        getUser() {
            //刷新商品
            this.$axios({
                method: "post",
                url: "/user/getUser",
            }).then((res) => {
                if (res.data.code == "0") {
                    this.user.id = parseInt(res.data.data.id)
                    this.user.name = res.data.data.user
                    this.user.group = res.data.data.user_group
                } else {
                    this.user.id = -1
                    this.user.name = null
                    this.user.group = null
                }
            })
        },
        getAllComm() {
            //刷新商品
            this.$axios({
                method: "post",
                url: "/welcome/showAll",
            }).then((res) => {
                this.commodity_list = res.data.data;
            })
        },
        buyOnclick(comm) {
            if (this.user.id != -1) {
                var scrollTab1 = document.getElementById('scroll-tab-1');
                var scrollTab2 = document.getElementById('scroll-tab-2');
                var scrollTab3 = document.getElementById('scroll-tab-3');
                scrollTab1.classList.remove('is-active');
                scrollTab2.classList.remove('is-active');
                scrollTab3.classList.add('is-active');

                this.$refs.buylist.setInfo(comm)
            } else {
                this.goToLogin()
            }
        },
        backToMainMenu() {
            var scrollTab1 = document.getElementById('scroll-tab-1');
            var scrollTab2 = document.getElementById('scroll-tab-2');
            var scrollTab3 = document.getElementById('scroll-tab-3');
            scrollTab1.classList.add('is-active');
            scrollTab2.classList.remove('is-active');
            scrollTab3.classList.remove('is-active');
        },
        msg(msg) {
            var snackbarContainer = document.querySelector('#demo-toast-example');
            var data = { message: msg };
            snackbarContainer.MaterialSnackbar.showSnackbar(data);
        },
        goToLogin() {
            window.location.href = "/#/login"
            window.location.reload()
        },
        goToMerchant() {
            window.location.href = "/#/merchant"
            window.location.reload()
        },
        userExit() {
            this.$axios({
                method: "post",
                url: "/user/userExit",
                async: true,
            }).then((res) => {
                window.location.reload()
            })
        },
        toBeMerchant() {
            this.$axios({
                method: "post",
                url: "/user/toBeMerchant",
                async: true,
            }).then((res) => {
                if (res.data.code == "0") {
                    window.location.reload()
                }
                else {
                    this.msg(res.data.msg)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.demo-layout-transparent {
    background: url('../assets/img/lucas-franco-aRTjFXs6HNc-unsplash.jpg') center / cover;
}

.touming {
    background-color: alpha($color: #00000000);
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
    /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
    color: white;
}

.commodity {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
    margin: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.body {
    background-image: url('../assets/img/dave-hoefler-AfYyR6n4ZY8-unsplash.jpg') center / cover;
}
</style>